<template>
  <div id="talentPie">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    pieData: Array | Object,
    name: String,
  },
  data() {
    return {
      colorList: [
        "#f3ac62", "#f89448", "#f18b6a","#f06c44", "#fd9254","#f3ac62", "#f89448", "#f18b6a","#f06c44", "#fd9254"
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawTalentPie();
  },

  methods: {
    drawTalentPie() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        color: that.colorList,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: ({d}%)",
        },
        legend: {
          //   data: [
          //     "商品总数",
          //     "动销商品数",
          //     "抖音浏览总量",
          //     "动销商品浏览量",
          //     "抖音订单量",
          //   ],
          icon: 'circle',
          bottom: -5,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          textStyle: {
            color: "#555"
          }
        },
        grid:{
            bottom:"160",
        },
        // legend: {
        //   orient: "vertical",
        //   left: 10,
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        // },
        series: [
          {
            name: that.name,
            type: "pie",
            radius: ["42%", "55%"],
            center: ["50%", "50%"],
            minAngle: 18,
            avoidLabelOverlap: false,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 15,
                length2: 8,
              },
            },
            label: {
              //   position: "center",
              formatter: " {b|{b}：}" + " " + "{d|{d}% }",
              borderColor: "#aaa",
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                  color: '#555'
                },
                d: {
                  align: "center",
                  color: '#555'
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            data: that.pieData,
          },
        ],
      };
      mychart.setOption(option);
      //   窗口自适应

      let resizeFn = function(){
        mychart.resize();
      }
      setTimeout(() => {
        window.addEventListener("resize", resizeFn);
        this.$once('hook:beforeDestroy', () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener('resize',resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#talentPie {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>